<template>
    <div class="select_type">
        <x-header title="选择团购品类" class="blues" :left-options="{backText: ''}">
            <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
        </x-header>
        <div class="content">
            <div class="all_class">
                <div class="first_class">
                    <ul v-for="(item,index) in allData">
                        <li :class="{sel1:index===selIndex1}" @click="selFirst(index)">{{ item.name }}</li>
                    </ul>
                </div>
                <div class="second_class">
                    <ul v-for="(item,index) in allData[selIndex1].childArr">
                        <li :class="{sel2:item.name===selValue}" @click="selSecond(index)">{{ item.name }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
    import { XHeader, Tab, TabItem } from 'vux';
    export default {
        name: 'select_type',
        data() {
            return {
                selIndex1: 0, //选中的一级分类索引
                selIndex2: 0, //选中的二级分类索引
                selValue: '', //选择的值
                allData: [{
                    id: 1,
                    name: '粤菜',
                    childArr:[
                        {
                            id: 101,
                            name: '粤菜一',
                        },{
                            id: 102,
                            name: '粤菜二',
                        },{
                            id: 103,
                            name: '粤菜三',
                        }]
                }, {
                    id: 2,
                    name: '湘菜',
                    childArr:[
                        {
                            id: 201,
                            name: '湘菜一',
                        },{
                            id: 202,
                            name: '湘菜二',
                        },{
                            id: 203,
                            name: '湘菜三',
                        }]
                }]
            }
        },
        components: {
            XHeader,
            Tab,
            TabItem
        },
        computed: {

        },
        created() {

            if(localStorage.getItem('types')) {
                let obj1 = JSON.parse(localStorage.getItem('types'));
                this.selIndex1 = obj1.selIndex1;
                this.selIndex2 = obj1.selIndex2;
                this.selValue = obj1.selValue;
            }
        },
        methods: {
            //帮助中心
            goHelp() {
                this.$router.push('/customerService');
            },
            //选择一级分类
            selFirst(id) {
                this.selIndex1 = id;
            },
            //选择二级分类
            selSecond(id) {
                this.selIndex2 = +id;
                let val = this.allData[this.selIndex1].childArr[this.selIndex2];
                let obj = {};
                obj.selIndex1 = this.selIndex1;
                obj.selIndex2 = this.selIndex2;
                obj.selValue = val.name;
                localStorage.setItem('types', JSON.stringify(obj));
                this.$router.push('/ticketRelease');
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .select_type {
        .content {
            text-align: left;
            .all_class {
                display: flex;
                .first_class {
                    width: 3.2rem;
                    background: #f0f0f0;
                    ul {
                        font-size: .28rem;
                        color: #363636;
                        list-style: none;
                        li {
                            height: .8rem;
                            line-height: .8rem;
                            padding-left: .26rem;
                        }
                    }
                    .sel1 {
                        background: #fff;
                        color: #41c8b8;
                    }
                }
                .second_class {
                    width: 4.3rem;
                    background: #fff;
                    ul {
                        font-size: .28rem;
                        color: #3f3f3f;
                        list-style: none;
                        li {
                            height: .8rem;
                            line-height: .8rem;
                            border-bottom: 1px solid #f2f2f2;
                            padding-left: .28rem;
                        }
                    }
                    .sel2 {
                        background: #40E0D0;
                    }
                }
            }
        }
    }
</style>